<template>
  <div>
    <Echart :options="options" id="bottomRightChart" height="480px" width="100%"></Echart>
    <div id="mynetwork"></div>
  </div>
</template>

<script>
import Echart from '@/common/echart'
// import { getTopo, selectTopoById } from '@/api/topo';



export default {
  data() {
    return {
      options: {}
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          dataset: {
            source: [
              ['score', 'amount', 'product'],
              [0, 4, '无HTTP重定向'],
              [0, 4, '未加密的连接'],
              [55, 4, 'http慢速攻击'],
              [30, 3, 'HTTP X-Permitted-Cross-Domain-Policies缺失'],
              [30, 3, 'HTTP X-Download-Optionsi缺失'],
              [30, 3, 'HTTP X-Content-Type-Optionsi缺失'],
              [30, 3, 'HTTP Referrer-Policy缺失'],
              [30, 3, '会话Cookie中缺少secure属性'],
              [30, 3, 'HTTP Content-Security-Policy缺失'],
              [30, 3, 'HTTP X-XSS-Protection缺失']
            ]
          },
          grid: { containLabel: true },
          xAxis: { name: 'amount' },
          yAxis: { type: 'category' },
          visualMap: {
            orient: 'horizontal',
            left: 'center',
            min: 10,
            max: 100,
            text: ['High Score', 'Low Score'],
            // Map the score column to color
            dimension: 0,
            inRange: {
              color:['#236ee1', '#2fbc94', '#c4d512', '#cf5b13', '#850204']
            }
          },
          series: [
            {
              type: 'bar',
              encode: {
                // Map the "amount" column to X axis.
                x: 'amount',
                // Map the "product" column to Y axis
                y: 'product'
              }
            }
          ]

        };
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    // this.getTopoList();
    // 初始化图表
  }
}
</script>
